<template>
  <div class="page page-menu">
    <div v-if="deskNumber" class="header">
      当前桌位号为<em>{{deskNumber}}</em>
    </div>
    <van-row>
      <van-col span="8">
        <ul class="menuList">
          <li v-for="menuList of menuLists" :key="menuList.label" :class="{'active': menuList.label === currentLabel}" @click="toggleMenu(menuList.items, menuList.label)">{{menuList.label}}</li>
        </ul>
      </van-col>
      <van-col span="15" offset="1">
        <ul v-if="currentMenuList" class="list-items">
          <li v-for="item of currentMenuList" :key="item.name" class="list-item">
            <img :src="'/static/'+item.image" :alt="item.name" v-if="item.image" />
            <img :src="demoImage" :alt="item.name" v-else />
            <span v-text="item.sale+'折'" v-if="item.sale" class="sale"></span>
            <div class="list-info">
              <h4 v-html="item.name"></h4>
              <span v-text="formatPrice(item.price, item.sale)" v-if="item.sale" class="price-sale"></span>
              <span v-text="'￥'+item.price" :class="{'line-through': item.sale}" class="price-normal"></span>
              <div class="button-function">
                <van-button size="small" type="default" @click="goToDetail(item.id)">查看详细</van-button>
                <van-button size="small" type="primary" @click="addToCart(item.id)" v-if="checkMenuIndex(item.id)">加入菜单</van-button>
                <van-button size="small" type="warning" @click="removeFromCart(item.id)" v-else>移出菜单</van-button>
              </div>
            </div>
          </li>
        </ul>
      </van-col>
    </van-row>
    <global-footer></global-footer>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import getMenuLists from '../../../../static/menu.js'
import globalFooter from '@/views/footer'

export default {
  name: 'index',
  data () {
    return {
      demoImage: require('../../../assets/demo.png'),
      deskNumber: null,
      menuLists: [],
      currentMenuList: null,
      currentLabel: null,
      checkIndex: false
    }
  },
  components: {globalFooter},
  computed: {
    ...mapGetters(['getDeskInfo', 'getFinalMenu'])
  },
  mounted () {
    if (this.$store.getters.getDeskInfo) {
      this.deskNumber = this.$store.getters.getDeskInfo
    }
    this.menuLists = getMenuLists()
    if (this.menuLists && this.menuLists.length > 0) {
      this.toggleMenu(this.menuLists[0].items, this.menuLists[0].label)
    }
  },
  methods: {
    toggleMenu: function (data, label) {
      // 只选择菜单中status为true的数据
      this.currentMenuList = data.filter(item => item.status === true)
      this.currentLabel = label
    },
    goToDetail: function (id) {
      this.$router.push({
        'name': 'MenuDetail',
        params: {menuId: id, label: this.currentLabel, recommend: false}
      })
    },
    addToCart: function (id) {
      this.$store.dispatch('changeFinalMenu', id)
      console.log(this.$store.getters.getFinalMenu)
    },
    removeFromCart: function (id) {
      let index = this.getFinalMenu.indexOf(id)
      this.$store.dispatch('spliceFinalMenu', index)
      console.log(this.$store.getters.getFinalMenu)
    },
    checkMenuIndex: function (id) {
      let index = this.getFinalMenu.indexOf(id)
      if (index > -1) {
        return false
      } else {
        return true
      }
    },
    formatPrice (price, sale) {
      return '¥ ' + Number(price * sale / 10).toFixed(2)
    }
  }
}
</script>

<style scoped lang="less">
  ul.menuList{
    li{
      background-color: #f0f0f0;
      border-bottom: 1px solid #fff;
      text-align: center;
      padding: 1rem 0;
      cursor: pointer;
      :last-child{
        border-bottom: 0;
      }
    }
    li.active{
      background-color: orange;
      color: #fff;
    }
  }
  ul.list-items{
    > li{
      position: relative;
      max-width: 300px;
      margin-bottom: 20px;
      .sale{
        position: absolute;
        right: 0;
        top: 0;
        background-color: #ff0000;
        color: #fff;
        font-style: italic;
        padding: 2px 8px 2px 5px;
        display: block;
      }
      .list-info{
        position: relative;
        margin: 5px 10px 10px;
        padding-right: 80px;
        h4{
          margin-bottom: 10px;
          + span{
            font-size: 16px;
            color: orange;
          }
        }
        .button-function{
          position: absolute;
          right: 0;
          top: 0;
          width: 70px;
          text-align: right;
          button + button {
            margin-top: 2px;
          }
        }
      }
    }
    > li:last-child{
      margin-bottom: 50px;
    }
  }
  .price-sale{
    margin-right: 10px;
  }
</style>
